<template>
    <el-dialog :model-value="addDialogVisible" :destroy-on-close="true" title="新增商户" width="600px"
        @close="emits('closeDialog')">
        <el-form ref="dialogFormRef" :model="addDialogForm" :label-width="formLabelWidth" :rules="rules">
            <el-form-item label="商户名称" prop="name">
                <el-input v-model="addDialogForm.name" />
            </el-form-item>
            <el-form-item label="商户昵称" prop="nickname">
                <el-input v-model="addDialogForm.nickname" />
            </el-form-item>
            <el-form-item label="商户ID" prop="merchant_id">
                <el-input v-model="addDialogForm.merchant_id" />
            </el-form-item>
            <el-form-item label="邮箱登录账号" prop="email">
                <el-input v-model="addDialogForm.email" />
            </el-form-item>
            <el-form-item label="初始登录密码" prop="password">
                <el-input v-model="addDialogForm.password" placeholder="请输入商户的初始登录密码，6位以上字母数字组合" />
            </el-form-item>
            <el-form-item label="主分类" prop="category">
                <el-input v-model="addDialogForm.category" />
            </el-form-item>
            <el-form-item label="子分类" prop="sub_category">
                <el-input v-model="addDialogForm.sub_category" />
            </el-form-item>
            <!-- <el-form-item label="收单支付通道ID" prop="channel_id">
                <el-input v-model="addDialogForm.channel_id" />
            </el-form-item>
            <el-form-item label="收单支付币种" prop="currency">
                <el-input v-model="addDialogForm.currency" />
            </el-form-item>
            <el-form-item label="收单支付回调url" prop="callback_url">
                <el-input v-model="addDialogForm.callback_url" />
            </el-form-item>
            <el-form-item label="收单支付成功通知url" prop="page_url">
                <el-input v-model="addDialogForm.page_url" />
            </el-form-item>
            <el-form-item label="收单支付失败通知url" prop="failed_url">
                <el-input v-model="addDialogForm.failed_url" />
            </el-form-item>
            <el-form-item label="收单通道费率" prop="rate">
                <el-input v-model="addDialogForm.rate" type="number" placeholder="费率0.05" />
            </el-form-item>
            <el-form-item label="收单单笔最小金额" prop="min_amount">
                <el-input v-model="addDialogForm.min_amount" type="number" placeholder="单笔最小充值金额" />
            </el-form-item>
            <el-form-item label="收单单笔最大金额" prop="max_amount">
                <el-input v-model="addDialogForm.max_amount" type="number" placeholder="单笔最大充值金额" />
            </el-form-item> -->
            
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(addDialogForm)" :loading="btnLoading">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const dialogFormRef = ref(null);

defineProps({
    addDialogVisible: {
        type: Boolean,
        default: false,
    },
    addDialogForm: {
        type: Object,
        default: {
            id: "",
            name: "",
            nickname: "",
            merchant_id: "",
            channel_id: "",
            currency: "",
            email: "",
            callback_url: "",
            page_url: "",
            failed_url: "",
            rate: "",
            min_amount: "",
            max_amount: "",
            password: "",
            category: "",
            sub_category: ""
        },
    },
    btnLoading: {
        type: Boolean,
        default: false,
    },
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "150px";
// 校验
const rules = {
    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
    email: [{ required: true, message: "请输入邮箱账号", trigger: "blur" }],
    merchant_id: [{ required: true, message: "请输入商户ID", trigger: "blur" }],
    // channel_id: [{ required: true, message: "请输入支付通道ID", trigger: "blur" }],
    // callback_url: [{ required: true, message: "请输入支付回调url", trigger: "blur" }],
    // currency: [{ required: true, message: "请输入支付币种", trigger: "blur" }],
    // rate: [{ required: true, message: "请输入支付通道费率", trigger: "blur" }],
    // min_amount: [{ required: true, message: "请输入最小充值金额", trigger: "blur" }],
    // max_amount: [{ required: true, message: "请输入最大充值金额", trigger: "blur" }],
    password: [{ required: true, message: "请输入商户的初始登录密码，6位以上字母数字组合", trigger: "blur" }],
};
// 提交
const submit = (addDialogForm) => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            try {
                const param = Object.assign({}, addDialogForm);
                emits("submitForm", param);
            } catch (error) {
                console.log(error);
            }
        })
        .catch((error) => {
            console.log(error);
        });
};
</script>
  